<template>
  <div >
    <van-tree-select
      :items="items"
      :active-id.sync="activeId"
      :main-active-index.sync="activeIndex"
      @click-nav="currentClick"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      datas:[],
      activeId: 1,
      activeIndex: 0,
      items: [
        { text: '', children: [{text: '',}]},
        { text: '', children: [{ text:''}]},
      ],
    };
  },
  async created(){
    await this.$axios({
      url:'/wx/catalog/index',
    }).then(res=>{
      // console.log(res.data.data);
      this.datas=res.data.data
      this.items=res.data.data.categoryList.map(itme=>{
        return {text: itme.name,id:itme.id}
      })
      this.items[0].children=res.data.data.currentSubCategory.map(item=>{
        return {text:item.name,id:item.id}
      })
    })
  },
  methods:{
    async currentClick(index){
      const id2 = this.datas.categoryList[index].id
      if(!this.items[index].children)
      await this.$axios({
        url:`/wx/catalog/current?id=${id2}`
      }).then(res=>{
        this.$set(this.items[index],'children',res.data.data.currentSubCategory.map(item=>{
        return {text:item.name,id:item.id}
      }))
      // console.log(this.items[index].children);
    })
    },
  },


};
</script>

<style scoped>
.van-tree-select{
  height: 100vh !important;
}
</style>